<template>
	<coreshop-page title="足迹" mode="left">
		<view class="layout-footprint-box m-25">
			<view v-if="state.list.length > 0">
				<view class="item-box" v-for="item, index in state.list" :key="index" @click="handleClickGoods(item)">
					<coreshop-goods-card type="horizontal" :nameOverflow="2" imgHeight="140rpx" imgWidth="140rpx"
						:goodsData="hanldeCombinationGoodsData(item)">
						<template #goodPrice>
							<view class="time-box">
								<uv-icon name="clock" color="#979797" size="16"></uv-icon>
								<view class="time">{{ item.createTime }}</view>
							</view>
						</template>
					</coreshop-goods-card>
					<view class="btn-box">
						<view class="collection" @click.stop="handleCollection(item.goodsId)">
							<uv-icon v-if="item.isCollection" name="heart-fill" color="#979797" size="18"></uv-icon>
							<uv-icon v-else name="heart" color="#979797" size="18"></uv-icon>
							<text class="tit">收藏</text>
						</view>
						<view class="delete" @click.stop="handleDelete(item.id)">
							<uv-icon name="trash" color="#979797" size="18"></uv-icon>
							<text class="tit">删除</text>
						</view>
					</view>
				</view>
				<view class="no-data" v-if="state.page === state.totalPages">没有更多了</view>
			</view>
			<view v-else class="layout-empty-box">
				<coreshop-empty :mode="EmptyEnum.history" text="暂无足迹"></coreshop-empty>
			</view>
		</view>
	</coreshop-page>
</template>
<script setup lang="ts">
	import { reactive, onMounted } from 'vue';
	import { onReachBottom } from '@dcloudio/uni-app';
	import { queryGoodsBrowsing, queryDelGoodsBrowsing, queryGoodsCollection } from '@/core/api';
	import type { Response, GoodsFootprintType } from '@/core/models';
	import { EmptyEnum } from '@/core/enum';
	import { handleShowToast, showToast } from '@/core/utils';

	const state = reactive<{
		list : Array<GoodsFootprintType>;
		totalPages : number;
		page : number
	}>({
		list: [],
		totalPages: 1,
		page: 1,
	})

	onMounted(() => {
		/** 获取浏览足迹 */
		getGoodsBrowsing()
	});

	/** 获取浏览足迹 */
	const getGoodsBrowsing = async () => {
		uni.showLoading({
			title: "加载中..."
		})
		const goodsBrowsing : Response<{
			count : number;
			list : Array<GoodsFootprintType>
		}> = await queryGoodsBrowsing({
			page: state.page,
			limit: 10,
		})
		state.totalPages = Math.ceil(goodsBrowsing.data?.count / 10);
		state.list = state.list.concat(goodsBrowsing.data?.list);
		uni.hideLoading();
	}

	/** 组合商品数据传入组件 */
	const hanldeCombinationGoodsData = (item : GoodsFootprintType) => {
		return {
			id: item.id,
			image: item.goodImage,
			name: item.goodsName,
			brief: '',
		}
	}

	onReachBottom(() => {
		if (state.totalPages > state.page) {
			state.page++;
			getGoodsBrowsing();
		}
	});

	const handleClickGoods = (item : GoodsFootprintType) => {
		uni.navigateTo({
			url: `/pages/goods/detail?id=${item.goodsId}`
		})
	}

	/** 收藏 */
	const handleCollection = async (id : number) => {
		const goodsCollection : Response<any> = await queryGoodsCollection({ id, });
		if (goodsCollection.status) {
			handleShowToast(goodsCollection.msg, 'success', () => {
				setTimeout(() => {
					state.page = 1;
					state.list = [];
					getGoodsBrowsing();
				}, 1000)
			})
		} else {
			handleShowToast(goodsCollection.msg)
		}
	}

	/** 删除商品浏览足迹 */
	const handleDelete = async (id : number) => {
		const delGoodsBrowsing : Response<any> = await queryDelGoodsBrowsing({ id, });
		if (delGoodsBrowsing.status) {
			handleShowToast(delGoodsBrowsing.msg, 'success', () => {
				setTimeout(() => {
					state.page = 1;
					state.list = [];
					getGoodsBrowsing();
				}, 1000)
			})
		} else {
			handleShowToast(delGoodsBrowsing.msg)
		}
	}
</script>
<style lang="scss" scoped>
	@import './footprint.scss';
</style>